<template>
  <ul>
    <li
      v-for="product in all"
    >
      {{product.name}} - ￥{{product.price}}
      <button 
        @click="addProductToCart(product)"
        :disabled="product.inventory <= 0"
      >放入购物车</button>
    </li>
  </ul>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState('product', ['all'])
  },
  methods: {
    ...mapActions('product', ['loadData']),
    ...mapActions('cart', ['addProductToCart'])
  },
  mounted() {
    this.loadData()
  }
}
</script>

<style lang='stylus' scoped>

</style>